<template>
    <view class="content">
        <view class="bg" v-if="driverList.driver.length>0"></view>
        
        <view class="box" v-for="(item, index) in driverList.driver" :key="index">
            <view class="work-title">司机信息</view>
            <view class="item">
                <view class="grey">姓名</view>
                <view class="item-right">{{item.name}}</view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">{{item.phone}}</view>
            </view>
            
            <view class="work-title u-p-t-30">车辆信息</view>
            <view class="item">
                <view class="grey">类型</view>
                <view class="item-right">{{item.vehicle}}</view>
            </view>
            <view class="item">
                <view class="grey">车号</view>
                <view class="item-right">{{item.number}}</view>
            </view>
            <view class="item">
                <view class="grey">车长</view>
                <view class="item-right">{{item.length}}</view>
            </view>
            <view class="item">
                <view class="grey">载重</view>
                <view class="item-right">{{item.load}}</view>
            </view>
            
            <view class="item">
                <view class="grey">状态</view>
                <view class="item-right">{{item.status==3?'同意':'拒绝'}}</view>
            </view>
            
             <!-- -->
            <view class="btns2" v-if="item.status==1">
                <view class="btn1" @click.stop="agree(item,3)">同意</view>
                <!-- <view class="btn4" @click.stop="refuse(item,4)">拒绝</view> -->
                <view class="btn4" @click.stop="show = true,reasonCont = item">拒绝</view>
                
            </view>
        </view>
        <view v-if="driverList.driver==0">
            <view class="u-text-center" style="color: gray;">暂无接单明细</view>
        </view>
        
        <u-modal v-model="show" title="拒绝原因" @confirm="refuse" :show-cancel-button="true">
            <view style="padding: 40rpx;">
                <input v-model="rejectReason" placeholder="输入拒绝原因" />
            </view>
        </u-modal>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id:'',
                driverList:[],
                reason:'',
                show:false,
                content:'',
                reasonCont:'',
                rejectReason:''
                
            };
        },
        onLoad(option) {
            this.id = option.id;
            this.receiving_orders()
        },
        methods: {
            
            vehicle_examine(str,status){
                this.$ajax('vehicle_examine', {
                    user_token:this.$getTokens(),
                    driver_id:str.id,//
                    status:status,
                    reason:status==4 ? this.rejectReason : ''
                }).then(ret => {
                	if (ret.success == 1000) {
                        // this.$backT()
                        let _this = this
                        this.$alert(ret.msg,function(){
                            _this.$backT()
                        })
                        
                	} else {
                        let _this = this
                        this.$alert(ret.msg,function(){
                            _this.$backT()
                        })
                		// this.$toast(ret.msg);
                	}
                    
                });
                
                
               
                
            },
            //接单明细
            receiving_orders(){
                this.$ajax('receiving_orders', {
                    user_token:this.$getTokens(),
                    car_id:this.id,//
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.driverList = ret.detail
                        
                        
                	} else {
                		this.$toast(ret.msg);
                	}
                    
                });
            },
            
            // 同意
            agree(item,staus) {
                uni.showModal({
                	title: '接单审核',
                	content: '您已同意该司机的接单申请',
                	success: (res) => {
                		if (res.confirm) {
                			this.vehicle_examine(item,staus)
                		} else if (res.cancel) {
                			console.log('用户点击取消');
                		}
                	}
                });
            },
            
            // 拒绝
            refuse(item,staus) {
                if(!this.rejectReason){
                    this.$toast('请输入拒绝原因');
                    return
                }
                
                this.vehicle_examine(this.reasonCont,4)
                
                // uni.showModal({
                // 	title: '拒绝接单',
                // 	content: '您是否确认拒绝接单申请',
                // 	success: (res) => {
                // 		if (res.confirm) {
                // 			this.vehicle_examine(this.reasonCont,staus)
                // 		} else if (res.cancel) {
                // 			console.log('用户点击取消');
                // 		}
                // 	}
                // });
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 10rpx;
        padding-bottom: 15rpx;
    }
    .item{
        padding: 15rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
        padding-left: 30rpx;
    }
    .grey{
        color: #656565;
    }
    .btns2{
        padding-top: 10rpx;
        padding-bottom: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .btn1{
        padding: 15rpx 45rpx;
        background-color: #004580;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn4{
        padding: 15rpx 45rpx;
        background-color: #99aeca;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }

</style>
